<template>
  <div>
    <div>
      <div class="toolbar">
        <el-form :inline="true" :model="q" size="mini">
          <el-form-item label="投诉时间">
            <el-date-picker v-model="q.created_at_begin" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            -
            <el-date-picker v-model="q.created_at_end" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="用户ID:">
            <el-input v-model="q.user_id" placeholder="用户ID" prefix-icon="el-icon-edit"></el-input>
          </el-form-item>
          <el-form-item label="投诉代理:">
          <el-select v-model="q.agency_id" clearable filterable placeholder="请输入代理账号">
            <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="投诉类型:">
            <el-select v-model="q.complaint_types" clearable placeholder="请选择">
              <el-option v-for="item in complaintTypes" :key="item.id" :label="item.value" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属总代:">
          <el-select v-model="q.parent_id" clearable filterable placeholder="请输入所属总代">
            <el-option v-for="item of AgencyMainList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="所属商户:">
            <el-select v-model="q.mch_id" clearable placeholder="请选择">
              <el-option v-for="item in MerchantsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="处理状态:">
            <el-select v-model="q.has_done" clearable placeholder="请选择">
              <el-option v-for="(val,name) in {'已处理':'true','待处理':'false'}" :key="name" :label="name" :value="val"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="danger" @click="reload">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      <el-button size="mini" @click="downloadData" :type="downloading?'info':'primary'" :loading="downloading" icon="el-icon-printer" style="float: right">{{downloading?'导出中...':'导出报表'}}</el-button>
    </div>
    <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>
      <el-table-column prop="id" label="投诉ID" width="80"></el-table-column>
      <el-table-column prop="user_id" label="用户ID" width="150"></el-table-column>
      <el-table-column prop="mch_name" label="所属商户" width="150">
        <template slot-scope="scope">{{scope.row.mch.name}}</template>
      </el-table-column>
      <el-table-column prop="agency_nickname" label="投诉代理" width="150">
        <template slot-scope="scope">{{scope.row.agency.user_name}}</template>
      </el-table-column>
      <el-table-column prop="parent_name" label="所属总代" width="160">
        <template slot-scope="scope">{{scope.row.agency.parent.user_name}}</template>
      </el-table-column>
      <!-- <el-table-column prop="mch_id" label="商户ID" width="100"></el-table-column> -->
      <el-table-column prop="complaint_types" label="投诉类型" width="150" :formatter="FormatterComplaintType"></el-table-column>
      <el-table-column prop="images" label="附件" width="160">
        <template slot-scope="scope">
          <div>
            <span style="margin:0 5px;cursor:pointer;color:#42b983" @click="openImage(url)" v-for="(url,index) in scope.row.images" :key="url">{{`图片${index+1}`}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="complaint_content" label="投诉内容" :show-overflow-tooltip="true"></el-table-column>

      <el-table-column prop="created_at" label="投诉时间" width="180"></el-table-column>
      <el-table-column prop="has_done" label="处理状态" width="80">
        <template slot-scope="scope">{{scope.row.has_done?'已处理':'待处理'}}</template>

      </el-table-column>
      <el-table-column prop="updated_at" label="最后更新时间" width="180"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button :type="scope.row.has_done?'success':'primary'" size="mini" @click="relpy(scope.row)">{{scope.row.has_done?'查看':'处理'}}</el-button>
             <el-button type="primary" size="mini" @click="showImInfo(scope.row)">聊天记录</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr" :page-size="q.page_size" layout="total, sizes, prev, pager, next, jumper" :total="listData.total"></el-pagination>
    </div>
    <save-update v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id" :AgencyType="AgencyType" :agencyNickname="agencyNickname" :has_done="has_done" :complaintTypes="complaintTypes" :MerchantsList="MerchantsList"></save-update>
    <service-iframe v-if="showServiceIframe" :showServiceIframe.sync="showServiceIframe" :ImInfo="ImInfo"></service-iframe>
  </div>
</template>

<script>
import { getMerchantsList, getComplaintList,exportExel,getAgencyList } from "@/api";
import { queryFilter } from "@/utils/patch";
import saveUpdate from "./saveUpdate";
import serviceIframe from "./serviceIframe";
import { getURL } from '@/api/img'

export default {
  components: {
    saveUpdate,serviceIframe
  },
  data () {
    return {
      showServiceIframe: false,
      topicId: null,
      agencyNickname: null,
      listData: {},
      q: { page_size: 30, page_no: 1, agency_type: 2 },
      listLoading: false,
      showUpdate: false,
        downloading: false,
      settleCycle: this.$store.state.app.settleCycle,
      show_id: null,
      ImInfo: {},
      MerchantsList: [],
      AgencyMainList: [],
      AgencyList: [],
      AgencyType: this.$store.state.app.AgencyType,
      isEnable: false,
      isShow: false,
      searchTime: [new Date(), new Date()],
      score: 0,
      has_done: null,
      starOptions: [
        { value: 1, label: 1 },
        { value: 2, label: 2 },
        { value: 3, label: 3 },
        { value: 4, label: 4 },
        { value: 5, label: 5 }
      ],
      complaintTypes: [
        { id: 1, value: "充值未到账" },
        { id: 2, value: "态度恶劣" },
        { id: 5, value: "给其他游戏打广告" },
        { id: 6, value: "不当言论" },
        { id: 4, value: "其他" }
      ]
    };
  },
  created () {
    this.getList();
    this.getMerchantsList();
    this.getAgencyList()
    this.getChildAgencyList()
  },
  deactivated () {
    this.listLoading = false;
  },
  methods: {
      downloadData(){
        this.downloading = true
        getComplaintList(Object.assign({}, this.q, {export: 1 })).then(res => {
          if(res.status === 0){
            this.exportExel(res.data.task_id)
          }
        }).catch(error => {
            this.downloading = false
        })
      },
    async exportExel (task_id) {
      const exportStatusRes = await exportExel(task_id)
      if (exportStatusRes.status === 0) {
        switch (exportStatusRes.data.status) {
          case 0:
            setTimeout(() => {
              this.exportExel(task_id)
            }, 1500)
            break
          case 1:
            window.location.href = `${window.location.origin}/export_data/${exportStatusRes.data.file_name}`
            this.downloading = false
            this.$message.success('导出成功')
            break;
          case 2:
              this.$message.info('导出失败')
              this.downloading = false
            break;
          case 3:
              this.$message.info('取消导出')
              this.downloading = false
            break;
        }
      }
    },
    query () {
      this.q = Object.assign(this.q, { page_no: 1, page_size: 30 });
      this.getList();
    },
    activated () {
      this.getList()
      this.getMerchantsList()
    },
    reload () {
      this.q = { page_size: 30, page_no: 1 };
      this.searchTime = [];
      this.getList();
    },
    relpy (row) {
      this.show_id = row.id
      this.has_done = row.has_done
      this.agencyNickname = row.agency.user_name
      this.showUpdate = true
    },
    sortlist (sort) {
      this.q.$orderby = sort.prop;
      this.getList();
    },
    handleSizeChange (val) {
      this.q.page_size = val;
      this.getList();
    },
    handleCurrentChange (val) {
      this.q.page_no = val;
      this.getList();
    },
    getList () {
      queryFilter(this.q);
      getComplaintList(this.q).then(res => {
        if (res.status === 0) {
          this.listLoading = false;
          this.listData = res.data;
        }
      });
    },
    typeFormartter (row, column) {
      let columnName = column.property;
      if (columnName === "use_vcode") {
        return row.use_vcode ? "是" : "否";
      } else if (columnName === "enable") {
        return row.enable ? "是" : "否";
      } else if (columnName === "working") {
        return row.working ? "是" : "否";
      }
    },
    getAgencyList () {
      getAgencyList({ agency_type: 2, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyMainList = res.data.items
        }
      })
    },
    getChildAgencyList () {
      getAgencyList({ agency_type: 1, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyList = res.data.items
        }
      })
    },
    getMerchantsList () {
      getMerchantsList().then(res => {
        if (res.status === 0) {
          this.MerchantsList = res.data.items;
        }
      });
    },
    exportExcel () {
      this.$message({ message: "待开发", type: "error" });
    },
    FormatterComplaintType (row, colum) {
      var result = [];
      row.complaint_types.forEach(function (item) {
        switch (item) {
          case 1:
            result.push("充值未到账");
            break;
          case 2:
            result.push("态度恶劣");
            break;
          case 5:
            result.push("给其他游戏打广告");
            break;
          case 6:
            result.push("不当言论");
            break;
          case 4:
            result.push("其他");
            break;
        }
      });
      return result.toString();
    },
    showImInfo (row) {
      this.ImInfo = row
        this.showServiceIframe = true
    },
    openImage (item) {
      const key = item.split('?')[0];
      getURL(key).then(res => {
        const d = res.data;
        if (d.status == 0) {
          const url = d.data.urls[0].url;
          if (url) window.open(url, '__blank');
        }
      })
    }
  },
  watch: {
    showUpdate () {
      if (!this.showUpdate) {
        this.getList();
      }
    }
  }
};
</script>
